import React, {Component} from "react";
import { Link } from 'react-router-dom';
import emitter from '@/events';
import Table from "../../component/Table";
import Search from "../../component/Search";
import ClassSelect from "./components/ClassSelect";
import { lesson_schoolList } from '@/api/userCenter';

import { formatTime } from "@/utils";

class Index extends Component{

    state = {
        searchConfig: {
            columns: [
                {
                    type: 'Input',
                    name: 'taskName',
                    placeholder: '练习名称',
                },
                {
                    type: 'Input',
                    name: 'curriculumName',
                    placeholder: '课题名称',
                },
                {
                    type: 'Select',
                    name: 'schoolId',
                    placeholder: '学校名称',
                    onChange: (e) => {
                        emitter.emit('schoolSelect', e)
                    },
                    options: []
                },
                {
                    type: 'Component',
                    name: 'classCodes',
                    component: ClassSelect,
                }
            ]
        },
        tableConfig: {
            columns: [
                {
                    title: '#',
                    width: 60,
                    fixed: 'left',
                    render: (text, record, index) => {
                        const {current,pageSize} = this.state.tableConfig.pagination;
                        return (current-1) * pageSize + (index+1)
                    }
                },
                {
                    title: '练习名称',
                    ellipsis: true,
                    width: 120,
                    render: (text) => <Link to={{pathname: "/user/course_mg/homework/"+text.taskId}}>{text.taskName}</Link>
                },
                {
                    title: '所属课程',
                    ellipsis: true,
                    dataIndex: 'curriculumName',
                    width: 120
                },
                {
                    title: '关联课时',
                    dataIndex: 'classhourName',
                    width: 100
                },
                {
                    title: '学校',
                    dataIndex: 'schoolName',
                    width: 120
                },
                {
                    title: '对应班级',
                    dataIndex: 'classCodesZH',
                    width: 120
                },
                {
                    title: '语言对',
                    render: (text) => `${text.sourceLanZh} - ${text.targetLanZh}`,
                    width: 120
                },
                {
                    title: '练习类型',
                    render: (text) => `${text.isOnline === 1 ?'线上':'线下'}`,
                    width: 80
                },
                {
                    title: '发布状态',
                    dataIndex: 'taskStatus',
                    width: 80
                },
                {
                    title: '发布人',
                    dataIndex: 'addUserZh',
                    width: 80
                },
                {
                    title: '发布时间',
                    render: (text) => `${(formatTime(text.releaseTime, 16))}`,
                    width: 130
                },
                {
                    title: '截止时间',
                    render: (text) => `${formatTime(text.requireTime, 16)}`,
                    width: 130
                },
                {
                    title: '完成情况',
                    render: (text) => `${text.submitNum +'/'+ text.allNum}`,
                    width: 80
                }
            ],
            pagination: {
                current: 1,
                pageSize: 15
            },
            params: {
                paramsMap: {},
                sortName: "release_time",
                sortType: "desc"
            },
            request: {
                method: 'post',
                url: '/TaskInfo/getTaskLists',
                headers: {}
            }
        }
    };

    componentDidMount() {
        lesson_schoolList().then(res => {
            if(res.success){
                this.setState((state) => {
                    state['searchConfig']['columns'][2]['options'] = res.data.map(item => ({value: item.id, text: item.schoolName}));
                    return {
                        ...state.searchConfig
                    }
                })
            }
        })
    }

    render() {
        return (
            <div className="table-list">
                <Search config={this.state.searchConfig} search={this.search} />
                <Table config={this.state.tableConfig} onRef={(ref) => this.table = ref } />
            </div>
        )
    }

    // 回调
    search = (searchConfig) => {
        const { tableConfig } = this.state;
        this.setState({
            tableConfig: {
                ...tableConfig,
                pagination: {
                    current: 1,
                    pageSize: 15
                }
            }
        }, () => {
            const { params, pagination } = this.state.tableConfig;
            this.table.getTableList({...params, paramsMap: {...searchConfig}}, pagination)
        })
    }
}

export default Index;